<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络诊断工具</title>
    <link rel="icon" href="static/favicon.ico" type="image/x-icon"> <!-- 添加这行 -->
    <script src="static/scripts/main.js"></script>
    <link rel="stylesheet" href="static/styles/thunderstorm.css">
    <link rel="stylesheet" href="static/styles/main.css">
</head>
<body>
    <div class="lightning"></div>
    <div class="container">
        <h1>网络诊断工具</h1>
        
        <!-- 功能选择 -->
        <label for="function">选择功能：</label>
        <select id="function" onchange="changeFunction()">
            <option value="ping">Ping</option>
            <option value="traceroute">Traceroute</option>
            <option value="tcptraceroute">TCP Traceroute</option>
        </select>
    
        <!-- 通用输入 -->
        <div id="commonInputs">
            <label for="destination">目标地址：</label>
            <input type="text" id="destination" placeholder="例如：8.8.8.8">
        </div>
    
        <!-- Ping 特定输入 -->
        <div id="pingInputs" style="display: none;">
            <label for="pingCount">Ping包数量：</label>
            <input type="number" id="pingCount" placeholder="例如：4" value="4">
        </div>
    
        <!-- TCP Traceroute 特定输入 -->
        <div id="tcpInputs" style="display: none;">
            <label for="tcpPort">TCP端口：</label>
            <input type="number" id="tcpPort" placeholder="例如：80" value="80">
        </div>
    
        <button onclick="executeFunction()">执行</button>
        <!-- 添加取消按钮 -->
        <button id="cancelButton" onclick="cancelFunction()" style="display: none;">取消</button>
        <div class="result" id="result"></div>
    </div>
</body>
</html>